<template>
   <div class="sidebar">
    <el-header style="background-color: rgb(0,175,240);height:48px;padding:0;">
    <el-col :span="4" push="1" style="background-color:rgb(4,166,226)">
        <img src="../../assets/images/u15209.png" alt="" style="margin-top:5px;margin-left:20px;">
        <span class="SBtitle">
            工地中心
        </span>
    </el-col>
    </el-header>
    <el-container>
    <el-aside width="21%">
    <el-col :span="19" push="5">
        <div style="height:20px;width:100%;"></div>
        <div style="height:10px;width:100%;background-color:#00aff0"></div>
        <el-menu
        default-active="2"
        background-color="#fafafa"
        text-color="rgb(51,51,51)">
            <el-menu-item-group>
            <template slot="title">
                <div class="groupT">
                    - 基本资料
                </div>
            </template>
            <el-menu-item index="1-1" @click='changeMain("personal")'><div class="groupC">个人资料</div></el-menu-item>
            <el-menu-item index="1-2" @click='changeMain("MySite")'><div class="groupC">我的工地</div></el-menu-item><!-- 改“profile1” -->
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 交易管理</div>
                </template>
                <el-menu-item index="1-1" @click='changeMain("MyOrders")'><div class="groupC">我的订单</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("ListDetail")'><div class="groupC">我的合同</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("PoudListBar")'><div class="groupC">我的磅单</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 账号安全</div>
                </template>
                <el-menu-item index="1-1" @click='changeMain("Code")'><div class="groupC">登陆密码</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 财务管理</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">账户余额</div></el-menu-item>
                <el-menu-item index="1-2"><div class="groupC">账单管理</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 增值服务</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">技术支持</div></el-menu-item>
                <el-menu-item index="1-2"><div class="groupC">我的积分</div></el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
                <template slot="title">
                    <div class="groupT">- 系统管理</div>
                </template>
                <el-menu-item index="1-1">
                    <div class="groupC">人员管理</div></el-menu-item>
                <el-menu-item index="1-2" @click='changeMain("")'><div class="groupC">我的消息</div></el-menu-item>
            </el-menu-item-group>
        </el-menu>
    </el-col>
    </el-aside>
    <div class="main">
      <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label" class="labelcolor">付款</span>
        <h1>请选择付款方式</h1>
        <p>订单编号：{{detail.id}}{{"       您需支付：￥"}}{{sumprice}}</p>
        <div style="margin:20px 20px;height:50px;width:1200px;background-color:#f2f2f2"><span style="line-height:50px;margin-left:20px;">支付方式</span></div>
        <el-radio-group v-model="radio">
          <el-radio :label="1"><img src="../../assets/images/u163531.png" alt=""></el-radio>
          <el-radio :label="2"><img src="../../assets/images/u163532.png" alt=""></el-radio>
          <el-radio :label="3"><img src="../../assets/images/u163533.png" alt=""></el-radio>
          <el-radio :label="4">线下转账</el-radio>
        </el-radio-group>
        <el-form :label-position="labelPosition" label-width="80px" :model="payment">
          <el-form-item label="收款单位">
            <p>杭州联晶网络科技有限公司</p>
          </el-form-item>
          <el-form-item label="开户银行">
            <p>中国建设银行杭州文晖支行</p>
          </el-form-item>
          <el-form-item label="银行账号">
            <p>56454456456456456</p>
          </el-form-item>
          <el-form-item label="付款账号*">
            <el-input v-model="payment.account" placeholder="请填入付款账号"></el-input>
          </el-form-item>
          <el-form-item label="付款凭证*">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="payment.img"
            list-type="picture">
            <el-button size="small"><img src="../../assets//images/cloud.png" alt="" style="display:inline;line-height:22px;"><span style="line-height:22px;">上传图片</span></el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="payment.subtext" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item><el-button>立即付款</el-button></el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    </div>
    </el-container>
   </div>
</template>
<script>
export default {
    name: 'profile',
    data() {
        return{
            radio:1,
            sumprice:3200.00,
            percentage:0,
            customColor:"#00aff0",
            timeremain:"1小时",
            payment:{
              payway:1,
              account:"",
              img:"",
              subtext:""
            },
            payway:[
              {id:1,imgURL:"../../assets/u163531.png"},
              {id:2,imgURL:"../../assets/u163532.png"},
              {id:3,imgURL:"../../assets/u163533.png"}
              ],
            detail:{
              id:"201514564812126121545",
              status:"待付款",
              type:"单次",
              time:"2019-02-16  15:00:00",
              user:[{
                id:1,
                site:"浙江省杭州市西湖区联合大厦B座",
                name:"张伟",
                phone:"19527250382"
              }],
              goods:[{
                goodname:"预拌抹灰砂浆",
                goodtype:"DPM16",
                price:6200,
                num:10
              },{
                goodname:"防冻剂",
                goodtype:"DPM16",
                price:6200,
                num:10
              }]
            }
        }
    },
    created(){
      alert("!!!")
        var a=location.search
        alert(a)
        alert(myDate.toLocaleString())
    },
    methods:{
        changeMain:function(obj){//点击导航栏
            window.location.href="/profile"
        }
    }
}
</script>
<style>
.statustop{
  position: relative;
  height: 100px;
  width: 100%;
}
.groupT{
    height: 30px;
    width: 100%;
    background-color: #f5f7fa;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    font-style: normal;
    line-height: 30px;
}
.el-menu-item{
    padding: 0 ! important;
}
.groupC{
    height: 56px;
    width: 100%;
    background-color: white;
    color: #00aff0;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    padding-left: 25px;
    line-height: 56px;
}
.SBtitle{
    color: white;
    font-size: 20px;
}
.main{
    height:200px;
    width: 100%;
    padding: 20px 8px 0 20px;
    box-sizing: border-box;
}
.labelcolor{
  /* color: #909399; */
  font-size: 16px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
}
.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
  color: #00aff0 !important;
}
.el-tabs__item{
    height: 50px;
}
</style>